export const addSearch = (editor) =>{
  // ------------------------------------------------------------------------------------------------------------ 
     /*
       搜索栏组件
       点击搜索框会有动态效果
       内置方法能够点击历史搜索并将对应值填入搜索框中
       输入内容并点击搜索图标提示搜索内容，并将搜索内容保存至历史记录中
       点击清空按钮，并点击确定，会清空搜索历史记录
     */
       editor.Components.addType('search', {
         model: {
           defaults: {
            attributes:{'data-gjs-type':'search'},
             script() {
               const that = this
               // 元素监听-搜索框获取焦点事件
               var th = document.getElementById(this.attributes.id.value);
               console.log(this.attributes)
               console.log('---------------------------------------------------------')
               console.log('this.attributes.id.value:' + this.attributes.id.value)
               th.getElementsByClassName('search-input-focus')[0].onfocus = function () {
                 var ch = th.getElementsByClassName("search-input")[0]
                 var searchInput = th.getElementsByClassName("search-input-focus")[0]
                 var searchHistory = th.getElementsByClassName("search-history")[0]
                 searchInput.style.width = '80%'
                 ch.style.width = '100%'
                 ch.style.borderRadius = "20px";
                 searchInput.style.borderRadius = "20px";
                 ch.style.flexDirection = 'row-reverse';
                 searchHistory.style.height = '100px';
                 searchHistory.style.backgroundColor = 'white';
                 searchHistory.style.boder = '1px solid lightgray';
                 searchHistory.style.display = 'inherit';
               }
               // 搜索框失去焦点事件
               th.getElementsByClassName('search-outer')[0].onmouseleave = function () {
                 var ch = th.getElementsByClassName("search-input")[0]
                 var searchInput = th.getElementsByClassName("search-input-focus")[0]
                 var searchHistory = th.getElementsByClassName("search-history")[0]
                 searchInput.style.width = '95%'
                 ch.style.width = '50%'
                 ch.style.borderRadius = "0px";
                 searchInput.style.borderRadius = "0px";
                 ch.style.flexDirection = 'row';
                 searchHistory.style.display = 'none';
               }
   
               th.getElementsByClassName('search-img')[0].onclick = function () {
                 var searchInput = th.getElementsByClassName("search-input-focus")[0]
                 if (!searchInput.value) alert("请输入搜索内容！")
                 else {
                   alert('搜索内容为' + searchInput.value)
                   var inner = th.getElementsByClassName('search-history-content')[0];
                   var test = document.createElement('div');
                   test.innerText = searchInput.value;
                   inner.appendChild(test);
                 }
               };
               th.getElementsByClassName('search-clear')[0].onclick = function () {
                 var r = confirm("是否确认清空搜索历史!");
                 if (r == true) {
                   var inner = th.getElementsByClassName('search-history-content')[0];
                   inner.innerHTML = ''
                 }
               };
               var searchInput = th.getElementsByClassName("search-input-focus")[0]
               var searchItem = th.getElementsByClassName('search-history-content')[0].getElementsByTagName("div");
               for (var i = 0; i < searchItem.length; i++) {
                 // 对每个div元素进行操作，例如：  
                 searchItem[i].onclick = function () {
                   searchInput.value = this.textContent
                 }
               }
             },
             styles:
               '.search-history{\
                   width: 100%;\
                   transition: 1s;\
                   display: none;\
                   padding: 20px;\
               }\
               .search-history-tip{\
                   display: flex;\
                   justify-content: space-between;\
                   font-size: 18px;\
                   width: 100%;\
                   color:black;\
               }\
               .search-history-content{\
                   margin-top: 1%;\
                   width: 100%;\
                   height: 80%;\
                   display: flex;\
               }\
               .search-history-content>div{\
                   margin-right:1%;\
                   font-size: 13px;\
                   color: rgb(153, 153, 153);\
                   display: flex;\
                   align-items: center;\
                   justify-content: center;\
                   width: 8%;\
                   height: 50%;\
                   background-color: #f4f4f5;\
                   border: 1px solid #dedfe0;\
                   border-radius: 5px;\
               }\
               .search-history-content>div:hover{\
                   color: black;\
               }\
               .search-input {\
                   width: 50%;\
                   height: 40px;\
                   display: flex;\
                   background-color: white;\
                   border: 1px solid lightgray;\
                   align-items: center;\
                   justify-content: space-between;\
                   transition: 1s;\
               }\
               .search-input>img {\
                   margin-left: 10px;\
                   margin-right: 10px;\
                   width: 30px;\
                   height: 30px;\
                   transition: 1s;\
               }\
               .search-input>input {\
                   height: 95%;\
                   width:95%;\
                   border: none;\
                   outline: none;\
                   margin-left: 5px;\
                   margin-right: 5px;\
                   transition: 1.5s;\
               }'
           }
         }
       });
       // 搜索栏视图，未使用
       const comp = editor.DomComponents.getType('search').view.extend({
         events: {
         },
       });
       // 注册搜索栏组件
       editor.Blocks.add('searchBlock', {
         label: '搜索栏',
         // attributes: { class: 'fa fa-text' },
         category: '其他类',
         content: {
           type: 'search', content: '<div class="search-outer"><div class="search-input" style="width: 50%;height: 40px;display: flex;background-color: white;border: 1px solid lightgray;align-items: center;justify-content: space-between;float:right;transition: 1s;" tabindex="1">\
               <img class="search-img"\
                   src="https://ts1.cn.mm.bing.net/th/id/R-C.bf5e6bcabaaa8143e41ce10c63d5bd79?rik=fEgSv7W2WL%2bhbg&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f170119%2f1-1F1191335510-L.png&ehk=UGOqdbbRrVRodnBwCyG7i7dgq3%2b2pmT6OpqYL3u%2bjBA%3d&risl=&pid=ImgRaw&r=0" />\
               <input type="text" placeholder="请输入搜索关键字" class="search-input-focus" />\
               </div>\
               <div class="search-history" style="width: 100%;transition: 1s;display: none;padding: 20px;">\
                   <div class="search-history-tip" style=" display: flex;justify-content: space-between;font-size: 18px;width: 100%;color:black;">\
                   <div>搜索历史</div><div class="search-clear" style="font-size: 12px;">清除</div></div>\
                   <div class="search-history-content" style="margin-top: 1%;width: 100%;height: 80%;display: flex;">\
                       <div>test1</div>\
                       <div>test2</div>\
                   </div>\
               </div></div>'},
               media:`<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>`
       });
 }